<template>
    <div>
        <el-form :model="queryParams" ref="monitor-data-queryForm" size="small" :inline="true" v-show="showSearch">
            <div class="app-space-between">
                <div class="app-space-between-left">
                    <el-form-item label="" prop="id">
                        <el-select v-model="queryParams.id" placeholder="请选择">
                            <el-option v-for="(item,index) in selectIdData" :key="index" :label="item.model" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="success">
                        <el-select v-model="queryParams.success" style="width: 140px;" placeholder="请选择">
                            <el-option label="失败" :value="0" />
                            <el-option label="成功" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="error">
                        <el-input v-model="queryParams.error" style="width: 300px;"
                            placeholder="请输入异常关键字(最多32个字)"></el-input>
                    </el-form-item>
                </div>
                <div class="app-space-between-right">
                    <el-button type="primary" size="mini" @click="getList">搜索</el-button>
                    <el-button size="mini" @click="resetQuery">重置</el-button>
                </div>
            </div>
        </el-form>

        <el-row class="mb8">
            <el-col :span="1.5" style="margin-right: 10px">
                <el-button type="primary" plain size="mini" @click="handleClean">清空数据</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <div style="height: 16px"></div>

        <el-table v-loading="loading" :data="postList">|
            <el-table-column show-overflow-tooltip label="目标表" width="100" align="center" prop="name" />
            <el-table-column show-overflow-tooltip label="事件" width="100" align="center" prop="phone" />
            <el-table-column show-overflow-tooltip label="结果" width="100" align="center" prop="mealCardNumber" />
            <el-table-column show-overflow-tooltip label="异常" width="100" align="center" prop="mealCardNumber" />
            <el-table-column show-overflow-tooltip label="时间" align="center" prop="mealCardNumber" />
            <el-table-column show-overflow-tooltip label="详情" width="100" align="center" prop="mealCardNumber" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import {
    listQueryData,
    cleanQueryData
} from "@/api/monitor/index";
import { dictMonitor } from "@/api/dict";
export default {
    data() {
        return {
            loading: true,
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 岗位表格数据
            postList: [],
            selectIdData:[],
            metaId: null,
            // 弹出层标题
            queryParams: {
                error: "",
                success: 0,
                id: "",
                pageNum: 1,
                pageSize: 10
            },
        };
    },
    async mounted() {
        let res = await dictMonitor();
        this.metaId = res.resultValue.metaId
        this.selectIdData = res.resultValue.meta;
        this.resetQuery()
    },
    methods: {
        async getList() {
            try {
                let res1 = await listQueryData("", this.queryParams);
                this.postList = res1.resultValue.data;
                this.total = res1.resultValue.total;
                this.loading = false;
            } catch (e) {
                this.loading = false;
            }
        },
        handleClean() {
            this.$confirm('确认清空数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await cleanQueryData({ id: this.metaId });
                this.$message.success("操作成功");
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.$refs["monitor-data-queryForm"].resetFields();
            this.queryParams.id = this.selectIdData[0].id;
            this.getList();
        },
    },
};
</script>
<style lang="scss" scoped></style>